<template>
  <div class="app-container">
    <el-card header="基本信息">
      <el-form size="small" label-suffix="：" class="basic-info">
        <el-form-item label="产品名称">{{
          orderDetail.productName
        }}</el-form-item>
        <el-form-item label="渠道名称">{{
          orderDetail.organizationName
        }}</el-form-item>
        <el-form-item label="sku名称">{{ orderDetail.skuName }}</el-form-item>
        <el-form-item label="下单手机号">{{ orderDetail.phone }}</el-form-item>
        <el-form-item label="订单编号">{{ orderDetail.orderNum }}</el-form-item>
        <el-form-item label="总金额（元）">{{
          orderDetail.totalAmount | formatCentToYuan
        }}</el-form-item>
        <el-form-item label="优惠券金额（元）">{{
          orderDetail.couponAmount | formatCentToYuan
        }}</el-form-item>
        <el-form-item label="支付金额（元）">{{
          orderDetail.payAmount | formatCentToYuan
        }}</el-form-item>
        <el-form-item label="支付方式">{{
          orderDetail.payType | formatPayType
        }}</el-form-item>
        <el-form-item label="微信支付订单号" v-if="orderDetail.payType === 1"
          >{{ orderDetail.wxPayOrderNum }}
        </el-form-item>
        <el-form-item label="支付时间">{{
          orderDetail.paymentTime
        }}</el-form-item>
        <el-form-item label="缴费方式">{{
          orderDetail.paymentMethod | formatPaymentMethod
        }}</el-form-item>
        <el-form-item label="订单状态"
          ><el-tag type="info" v-if="orderDetail.status === 0">初始化</el-tag>
          <el-tag v-else-if="orderDetail.status === 1">待付款</el-tag>
          <el-tag type="success" v-else-if="orderDetail.status === 2"
            >已完成</el-tag
          >
          <el-tag type="danger" v-else>无效订单</el-tag></el-form-item
        >
        <el-form-item label="推广人手机号">{{
          orderDetail.promoterPhone
        }}</el-form-item>
        <el-form-item label="订单备注">{{ orderDetail.remark }}</el-form-item>
      </el-form>
    </el-card>

    <el-card header="元产品信息" style="margin-top: 12px">
      <el-row>
        <el-form
          size="small"
          label-suffix="："
          v-for="(item, index) of orderDetail.metaInfos"
          :key="index"
        >
          <el-col :span="12">
            <el-form-item label="名称">{{ item.metaName }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用次数/总次数"
              >{{ item.usedNum }}/{{
                item.num <= -1 ? "不限次数" : item.num
              }}</el-form-item
            >
          </el-col>
        </el-form>
      </el-row>
    </el-card>

    <el-card header="被保险人信息" style="margin-top: 12px">
      <el-form
        size="small"
        label-suffix="："
        v-for="(item, index) of orderDetail.omsInsurants"
        :key="index"
        class="insurance-info"
      >
        <el-form-item label="姓名">{{ item.fullName }}</el-form-item>
        <el-form-item label="证件类型">{{
          item.idType | formatIdType
        }}</el-form-item>
        <el-form-item label="证件号码">{{ item.idNum }}</el-form-item>
        <el-form-item label="创建人">{{ item.createdBy }}</el-form-item>
        <el-form-item label="创建时间">{{
          item.createdAt | formatDate
        }}</el-form-item>
        <el-form-item label="修改人">{{ item.updatedBy }}</el-form-item>
        <el-form-item label="修改时间">{{
          item.updatedAt | formatDate
        }}</el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getOrderDetail } from "@/api/order";
import { formatDate } from "@/utils/date";
import { formatCentToYuan } from "@/utils/format";

export default {
  name: "orderDetail",

  data() {
    return {
      orderDetail: {},
    };
  },

  computed: {
    orderId() {
      return this.$route.query.id;
    },
  },

  watch: {
    orderId: {
      handler(newVal) {
        newVal && this.init();
      },
      immediate: true,
    },
  },

  created() {},

  filters: {
    formatDate(value) {
      if (value) {
        let date = new Date(value);
        return formatDate(date, "yyyy-MM-dd hh:mm:ss");
      }

      return value;
    },

    formatPayType(value) {
      if (value === 0) {
        return "未支付";
      } else if (value === 1) {
        return "微信支付";
      }

      return value;
    },

    formatPaymentMethod(value) {
      if (value === 1) {
        return "分期缴费";
      } else if (value === 2) {
        return "趸交";
      }

      return value;
    },

    formatStatus(value) {
      if (value === 0) {
        return "初始化";
      } else if (value === 1) {
        return "待付款";
      } else if (value === 2) {
        return "已完成";
      } else if (value === 3) {
        return "无效订单";
      }

      return value;
    },

    formatIdType(value) {
      if (value === 0) {
        return "身份证";
      }

      return value;
    },
    formatCentToYuan,
  },

  methods: {
    init() {
      getOrderDetail(this.orderId).then((res) => {
        if (res.code === 200) {
          this.orderDetail = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container /deep/ .el-form-item__content {
  &:empty:before {
    content: "/";
  }
}

.basic-info,
.insurance-info {
  display: grid;
  grid-template-columns: auto auto auto auto;
}
</style>
